<!DOCTYPE html>
<html>
<head>
<title>jQuery工作流程步骤进度插件ystep - 站长素材</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入ystep样式 -->
<link rel="stylesheet" href="css/ystep.css">
</head>
<body style="width:450px; margin:0 auto">

<br><br><br><br><br>
<!-- ystep容器 -->
<div class="ystep1"></div>

<br><br><br><br><br>

<div class="ystep2"></div>

<br><br><br><br><br>

<div class="ystep3"></div>

<br><br><br><br><br>

<div class="ystep4"></div>

<!-- 引入jquery -->
<script src="js/jquery.min.js"></script>
<!-- 引入ystep插件 -->
<script src="js/ystep.js"></script>
<script>
//根据jQuery选择器找到需要加载ystep的容器
//loadStep 方法可以初始化ystep
$(".ystep1").loadStep({
  //ystep的外观大小
  //可选值：small,large
  size: "small",
  //ystep配色方案
  //可选值：green,blue
  color: "green",
  //ystep中包含的步骤
  steps: [{
	//步骤名称
	title: "发起",
	//步骤内容(鼠标移动到本步骤节点时，会提示该内容)
	content: "实名用户/公益组织发起项目"
  },{
	title: "审核",
	content: "乐捐平台工作人员审核项目"
  },{
	title: "募款",
	content: "乐捐项目上线接受公众募款"
  },{
	title: "执行",
	content: "项目执行者线下开展救护行动"
  },{
	title: "结项",
	content: "项目执行者公示善款使用报告"
  }]
});

$(".ystep2").loadStep({
  size: "large",
  color: "green",
  steps: [{
	title: "发起",
	content: "实名用户/公益组织发起项目"
  },{
	title: "审核",
	content: "乐捐平台工作人员审核项目"
  },{
	title: "募款",
	content: "乐捐项目上线接受公众募款"
  },{
	title: "执行",
	content: "项目执行者线下开展救护行动"
  },{
	title: "结项",
	content: "项目执行者公示善款使用报告"
  }]
});

$(".ystep3").loadStep({
  size: "small",
  color: "blue",
  steps: [{
	title: "发起",
	content: "实名用户/公益组织发起项目"
  },{
	title: "审核",
	content: "乐捐平台工作人员审核项目"
  },{
	title: "募款",
	content: "乐捐项目上线接受公众募款"
  },{
	title: "执行",
	content: "项目执行者线下开展救护行动"
  },{
	title: "结项",
	content: "项目执行者公示善款使用报告"
  }]
});

$(".ystep4").loadStep({
  size: "large",
  color: "blue",
  steps: [{
	title: "发起",
	content: "实名用户/公益组织发起项目"
  },{
	title: "审核",
	content: "乐捐平台工作人员审核项目"
  },{
	title: "募款",
	content: "乐捐项目上线接受公众募款"
  },{
	title: "执行",
	content: "项目执行者线下开展救护行动"
  },{
	title: "结项",
	content: "项目执行者公示善款使用报告"
  }]
});

$(".ystep1").setStep(2);
$(".ystep2").setStep(5);
$(".ystep3").setStep(3);

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>